<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <span id="hours">00</span>
    :
    <span id="minutes">00</span>
    :
    <span id="seconds">00</span>
    
    <script>
    var hours=document.getElementById("hours");
    var minutes=document.getElementById("minutes");
    var seconds=document.getElementById("seconds");
    function fn(){
        var date=new Date();
        hours.innerHTML=time(date.getHours());
        minutes.innerHTML=time(date.getMinutes());
        seconds.innerHTML=time(date.getSeconds());
    }
    setInterval(() => {
        fn();
    }, 1000);
    fn();
    // 如果为单数，再前面添加0
    function time(str){
        if(str<10){
            return "0"+str;
        }
        else{
            return str;
        }
    }
    </script>
</body>
</html>